<template>
  <div class="coupon-wrapper">
    <div class="top">优惠券名称</div>
    <div class="bottom">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="已领取" name="first" />
        <el-tab-pane label="已核销" name="second" />
      </el-tabs>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label="头像">
          <template slot-scope="scope">
            <div>
              <el-avatar :size="60" :src="scope.row.circleUrl || scope.row.portrait_url" />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="nickname" label="昵称" />
        <el-table-column prop="phone" label="手机号" />
        <el-table-column prop="designer_name" label="设计师" />
        <el-table-column prop="created_at" v-if="activeName == 'first'" label="领取时间" />
        <el-table-column prop="verify_at"  v-if="activeName == 'second'" label="核销时间" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { getDesignerVerificCoupon } from "@/api/http/coupon";
export default {
  data() {
    return {
      id:0,
      designerId:0,
      status:0,
      activeName: "first",
      tableData: []
    };
  },
  created(){
    if(this.$route.query.status == 1){
      this.activeName = "second";
    }
    this.status = this.$route.query.status;
    this.id = this.$route.query.id;
    this.designerId = this.$route.query.designerId;
    this.getDesignerVerificCoupon();
  },
  methods: {
    // 获取已领取和已核销
    getDesignerVerificCoupon(){
      getDesignerVerificCoupon({
        coupon_id:this.id,
        designer_id:this.designerId,
        status:this.status
      }).then(res=>{
        if(res.code == 200){
          console.log(res,'---res---77');
          if(res.code == 200){
            this.tableData = res.data.data.data;
          }
        }
      });
    },
    handleClick() {
      if(this.activeName == 'first'){
        this.status = 0;
      }else{
        this.status = 1;
      }
      this.getDesignerVerificCoupon();
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/el-table.scss";
.top {
  line-height: 44px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/ .el-tabs__header {
  margin: 0;
}
</style>
